var xsocialUI = {
	createWindow : function(para){
		var para = para || {};
		var friends_list = para.data || [];
		var content = para.content || '';
		var title = para.title || 'Invite';
		var onclick = para.onclick || null;
		var onclose = para.onclose || null;
		
		if (document.getElementById('xs_friend_window_parent')) {
			document.body.removeChild(document.getElementById('xs_friend_window_parent'));
		}
		
		var friends_html = '';
		
		friends_html = '<div id="xs_friend_window" style="position:absolute; z-index:99999; background:#ddd; width:700px; height:500px; font:100 12px arial; color:333; margin:50px 0px 0px -350px;top:0; left:50%; -webkit-box-shadow:2px 5px 12px #555; border-radius:5px;"> \
			<div style="margin:5px 10px"> \
			    <h1 style="margin:0;padding:0; font-size:16px; float:left"><span>' + title + '</span></h1> \
                <button id="xs_close_window" style="float:right; border:none; cursor:pointer; border-radius:5px; background:#999; color:#fff; font:900 11px arial;"><span>X</span></button> \
                <div style="clear:both"></div> \
            </div> \
            <div id="xs_friend_window_content" style="background:#fff; margin:0 auto; width:690px; height:440px; overflow-y:scroll;">'
		    + content + '<div style="clear:both"></div> \
		    </div> \
            <center><button id="xs_ok_window" style="border:none; cursor:pointer; border-radius:5px; background:#999; color:#fff; font:900 12px arial; line-height:20px; width:200px"><span>OK</span></button></center> \
        </div>';
		
		var s = document.createElement("div");
		s.id = 'xs_friend_window_parent';
		s.innerHTML = friends_html;
		
		// append it to DOM tree
		document.body.appendChild(s);
		
		//document.getElementById('xs_friend_window_content').innerHTML = content + '<div style="clear:both"></div>';
		
		document.getElementById('xs_close_window').onclick = function(){
			document.body.removeChild(document.getElementById('xs_friend_window_parent'));
			if (onclose) onclose(false);
		}
		document.getElementById('xs_ok_window').onclick = function(){
			document.body.removeChild(document.getElementById('xs_friend_window_parent'));
			if (onclose) onclose(true);
		}
		
	},
	
	friendsSelector : function(friends,callback) {
	    if (friends.length <= 0) {
	        return 'You have no friends.';
	    }
	    var html = '';
	    for(var i in friends) {
	        var friend = friends[i];
			html += '<div style="float:left; width:150px; height:60px; border:1px solid #eee; border-radius:5px; margin:5px; cursor:pointer" class="friend_item" value="' +friend['uid']+ '" id="xs_friend_' +friend['uid']+ '" onclick="xsocialUI.onFriendClick(' + friend['uid'] +')">';
			html += '<img width="40" height="40" style="display:block; padding:5px; float:left" src="' +friend['thumbnail']+'">';
			html += '<span style="style="padding:5px 5px 5px 0px; display:block; width:90px; float:left">' +friend['name']+ '</span>';
			html += '</div>';
		}
		/*
				// bind
		function bind_click_func(e) {
			e.onclick = function() {
				var id = e.getAttribute('value');
				if (onclick) callback(e, id);
			}
		}
		//TODO: bind default selected
		// bind the click event
		if (callback)
		for(var i in friends) {
			var item = document.getElementById('xs_friend_' +friends['uid']);
			bind_click_func(item);
		}
		*/
		return html;
	},
	
	onFriendClick : function(id) {
	}
};
